<template>
  <div class="excel-container">
    <UploadExcel :before-upload="beforeUpload" :on-success="onSuccess" />
  </div>
</template>

<script>
import { formatExcelDate } from '@/utils'
import { batchEmployee } from '@/api/employee'
import UploadExcel from '@/components/UploadExcel/index.vue'
export default {
  name: 'ImportExcel',
  components: { UploadExcel },
  methods: {
    beforeUpload(file) {
    // 这个函数必须 return 一个布尔值 并且只有 return 出去的是 true 的时候才会执行后续的解析 excel 的操作
    // 如果 reture false，表示校验不通过，不会进行正式的解析操作
      // console.log('上传前', file)
      // 文件大小超过 1M 不允许导入
      const isLt1M = file.size / 1024 / 1024 < 1 // 小于1M
      if (isLt1M) {
        return true
      }
      this.$message({
        message: '文件体积不能超过1M',
        type: 'warning'
      })
      return false
    },
    async onSuccess({ results, header }) {
    // results：表体数据
    // header：表头数据
      // console.log('上传完成', results, header)
      // 数据格式不对，可以改变键值对
      const headerRelation = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '工号': 'workNumber',
        '聘用形式': 'formOfEmployment',
        '部门': 'departmentName',
        '转正日期': 'correctionTime'
      }
      // 声明一个新的方法并使用
      const data = this.getImportData(results, headerRelation)
      // 调用接口
      await batchEmployee(data)
      this.$message.success('批量导入成功')
      this.$router.go(-1)
    },
    // 方法声明
    getImportData(results, headerRelation) {
      // 声明一个需要导出的空数组
      const arr = []
      // 循环遍历 需要处理的数据 因为这个数据中的键是 中文格式
      results.forEach((item) => {
        // 声明一个新的对象，用来存放转换好的数据
        const obj = {}
        // 拿到需要处理对象的 key 就是所有的中文 key 进行遍历
        Object.keys(item).forEach(key => {
          // 赋值 obj key 就是 声明数据(中中文的键对应的那个英文 value)
          // 赋值的 vulue 就是 原来数据的 value
          if (['timeOfEntry', 'correctionTime'].includes(headerRelation[key])) {
            obj[headerRelation[key]] = formatExcelDate(item[key], '-')
          } else {
            obj[headerRelation[key]] = item[key]
          }

          // console.log(obj)
        })
        arr.push(obj)
      })
      console.log(arr)
      return arr
    }
  }
}
</script>

<style lang="scss" scoped>
.excel-container{
  padding: 50px;
}
</style>
